<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/templates/main_template.xhtml">

	<ui:define name="header">
		<script type="text/javascript">
			//<![CDATA[
			//debe usarse los \\:  en lugar de : en los selectores de JQuery
			$(document).ready(function() {
				$("#form_login\\:username").change(function() {
					console.log('cambo en username');
				});
			});

			function manejarLogin(xhr, status, args) {
				if (!args.validationFailed && args.estaLogeado) {
					setTimeout(function() {
						window.location = args.view;
					}, 500);
				}
			}
			function newUserPage(xhr, status, args) {
				setTimeout(function() {
					window.location = args.view;
				}, 500);
			}
			//]]>
		</script>
	</ui:define>

	<ui:define name="content">
		<p:growl id="mensajes" showDetail="true" life="2000" />
		<h:form id="form_login">
			<h:outputLabel for="username" value="Usuario:" />
			<p:inputText value="#{loginController.nombre}" id="username"
				required="true" label="username" />
			<h:outputLabel for="password" value="Clave:" />
			<p:password value="#{loginController.clave}" id="password"
				required="true" label="password" />
			<p:commandButton id="loginButton" value="Login"
				actionListener="#{loginController.login}" update=":mensajes"
				oncomplete="manejarLogin(xhr, status, args)" />
		</h:form>

	</ui:define>
</ui:composition>